<template>
  <van-dialog title="评分标准" v-model="dialogShow" confirmButtonText="关闭" @confirm="close" class="dialog">
    <!-- <div class="criteria">
      <div class="standard_remark">
        提示：根据“德、能、勤、绩、廉”给出相应的考核等次（好（100分）、较好（80分）一般（60分）、较差（0分））。
      </div>
      <div class="list" v-for="(item, index) in scoreData" :key="index">
        <div class="list_tit">
          <span class="title-text">{{ item.title }}</span>
        </div>
        <div class="list_con">
          <div class="li" v-for="(li, i) in item.dataList" :key="i">
            <div class="li_l">
              <div class="grade">{{ li.label }}</div>
              <div class="score">{{ li.min }}-{{ li.max }}</div>
            </div>
            <div class="li_v">{{ li.brief }}</div>
          </div>
        </div>
      </div>
    </div> -->
    <div class="criteria">
      <div class="standard_remark">
        {{ scoreDataNew.assessDesc }}
      </div>
      <div class="standard_con">
        <CollapseComponent :collapseData="scoreDataNew.children"></CollapseComponent>
      </div>
    </div>
  </van-dialog>
</template>

<script>
import scoreData from './scoreData'
import CollapseComponent from './CollapseComponent'
import { getAssessTarget } from '@api/api-comment.js'
// 评分标准
export default {
  name: 'ScoringCriteria',
  components: { CollapseComponent },
  props: {
    criteriaShow: Boolean,
    // scoreDataNew: {
    //   type: Object,
    //   default: () => {},
    // },
  },
  data() {
    return {
      scoreData: scoreData,
      dialogShow: false,
      scoreDataNew: {},
    }
  },
  computed: {},
  watch: {
    criteriaShow: {
      handler(news) {
        this.dialogShow = news
      },
      deep: true,
    },
  },
  created() {
    this.getAssessTarget()
  },
  mounted() {},
  methods: {
    close() {
      this.$emit('close')
    },
    getAssessTarget() {
      getAssessTarget({
        id: this.$route.query.needId,
      }).then(res => {
        this.scoreDataNew = res.data || {}
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.dialog {
  height: 60vh;
  width: 95%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
/deep/.van-dialog__content {
  overflow-y: auto;
  height: 80%;
  padding: 10px 10px 0 !important;
}
.criteria {
  .list {
    margin-bottom: 0.2rem;
    .list_tit {
      font-size: 14px;
      font-weight: bold;
      padding-left: 10px;
    }
    // .list_tit::before {
    //   content: '|';
    //   color: #d9001b;
    //   background-color: #d9001b;
    //   width: 1px;
    //   height: 100%;
    //   margin-right: 5px;
    //   font-weight: 400;
    // }
    .list_con {
      padding: 0.2rem;
      .li {
        display: flex;
        align-items: stretch;
        border: 1px solid #ccc;
        font-size: 12px;
        &:not(:last-of-type) {
          border-bottom: 0;
        }
        .li_l {
          width: 50px;
          border-right: 1px solid #ccc;
          @include columnCenter;
          padding: 5px;
        }
        .li_v {
          padding: 5px;
          flex: 1;
          line-height: 14px;
          @include columnCenter;
        }
      }
    }
  }
  .standard_remark {
    font-size: 14px;
    padding: 0 0.2rem;
    line-height: 17px;
    font-weight: bold;
    color: #004db6;
    margin-bottom: 10px;
    div {
      margin-bottom: 5px;
    }
  }
}
</style>
